<!--头部版块-->
<app-page-header [pageHeaderInfo]="pageHeaderInfo"></app-page-header>
<div class="normal-table-wrap">
  <nz-card [nzBodyStyle]="{'padding-bottom':0}" class="m-b-10">
    <form nz-form>
      <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24}">
        <div nz-col [nzXXl]="5" [nzXl]="5" [nzLg]="5" [nzMd]="12" nzSm="24" nzXs="24">
          <nz-form-item>
            <nz-form-label [nzFor]="">危序号</nz-form-label>
            <nz-form-control>
              <input nz-input [(ngModel)]="searchParam.dangerNo" name="dangerNo" placeholder="危序号" id="dangerNo"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzXXl]="5" [nzXl]="5" [nzLg]="5" [nzMd]="12" nzSm="24" nzXs="24">
          <nz-form-item>
            <nz-form-label [nzFor]="">品名</nz-form-label>
            <nz-form-control>
              <input nz-input [(ngModel)]="searchParam.cnName" name="cnName" placeholder="品名" id="cnName"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzXXl]="5" [nzXl]="5" [nzLg]="5" [nzMd]="12" nzSm="24" nzXs="24">
          <nz-form-item>
            <nz-form-label [nzFor]="">别名</nz-form-label>
            <nz-form-control>
              <input nz-input [(ngModel)]="searchParam.alias" name="alias" placeholder="别名" id="alias"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzXXl]="4" [nzXl]="4" [nzLg]="4" [nzMd]="12" nzSm="24" nzXs="24">
          <nz-form-item>
            <nz-form-label [nzFor]="">CAS</nz-form-label>
            <nz-form-control>
              <input nz-input [(ngModel)]="searchParam.cas" name="cas" placeholder="cas" id="cas"/>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzXXl]="5" [nzXl]="6" [nzLg]="6" [nzMd]="12" nzSm="24" nzXs="24" class="text-right">
          <button nz-button [nzType]="'primary'" (click)="search()"><i nz-icon nzType="search"></i>搜索</button>
          <button nz-button class="m-l-15" (click)="resetForm()"><i nz-icon nzType="close-circle" nzTheme="outline"></i>重置
          </button>
        </div>
      </div>
    </form>
  </nz-card>
  <app-card-table-wrap (reload)="reloadTable()" [btnTpl]="tableBtns">
    <app-ant-table (selectedChange)="selectedChecked($event)" (changePageSize)="changePageSize($event)"
                   (changePageNum)="getDataList($event)"
                   [checkedCashArrayFromComment]="checkedCashArray"
                   [tableConfig]="tableConfig" [tableData]="dataList"></app-ant-table>
    <ng-template #operationTpl let-id="id" let-cnName='cnName'>
      <span class="operate-text" (click)="edit(id)"><i nz-icon nzType="delete" nzTheme="outline"></i>编辑/查看</span>
      <ng-container *ngIf="AdminService.isAdmin">
        <span class="operate-text" (click)="del(id)"><i nz-icon nzType="edit" nzTheme="outline"></i>删除&nbsp;</span>
      </ng-container>
    </ng-template>
  </app-card-table-wrap>
</div>
<ng-template #tableBtns>
  <button *ngIf="AdminService.isAdmin" (click)="add()" nz-button nzType="primary" class="m-r-8"><i nz-icon
                                                                                                   nzType="plus"></i>新建
  </button>
  <button (click)="export()" nz-button nzType="default" class="m-r-8"><i nz-icon
                                                                         nzType="ordered-list"></i>辨识导出
  </button>
</ng-template>
